<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>收付款</title>
  <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
  <script src="{{ url_for('static', filename='js/pay.js') }}"></script>
  <style>
    /* 添加状态指示器样式 */
    .status-indicator {
      position: fixed;
      top: 10px;
      right: 10px;
      padding: 4px 8px;
      border-radius: 12px;
      font-size: 12px;
      background-color: rgba(0,0,0,0.7);
      color: white;
      z-index: 1000;
    }
    
    .qr-loading {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 14px;
      color: #666;
    }
  </style>
</head>
<body>
  <div class="container">
    <header class="header">
      <button class="back-btn" id="backBtn">←</button>
      <h2>收付款</h2>
      <div class="status-indicator" id="statusIndicator">默认状态</div>
    </header>

    <!-- 二维码区域 -->
    <div class="qr-section">
      <div class="qr-container">
        <h2 id="qr-title">向商家付款</h2>
        <div style="position: relative;">
          <img id="qr-image" src="{{ url_for('static', filename='img/hh.gif') }}" alt="付款二维码" class="qr-code">
          <div id="qr-loading" class="qr-loading" style="display: none;">加载中...</div>
        </div>
        <p id="qr-description">每十分钟自动刷新</p>
      </div>
    </div>

    <!-- 功能按钮 - 添加红包功能 -->
    <div class="pay-functions">
      <div class="func-row">
        <button class="func-item" onclick="openReceive()">
          <img src="{{ url_for('static', filename='img/sq.png') }}" alt="收钱">
          <span style="color: black;">收钱</span>
        </button>
        <button class="func-item" onclick="openTouchPay()">
          <img src="{{ url_for('static', filename='img/pyx.png') }}" alt="碰一下">  
          <span style="color: black;">碰一下</span>
        </button>
      </div>
      <div class="func-row">
        <button class="func-item" onclick="openTransfer()">
          <img src="{{ url_for('static', filename='img/zz.png') }}" alt="转账">
          <span style="color: black;">转账</span>
        </button>
        <button class="func-item" onclick="openRedpack()">
          <img src="{{ url_for('static', filename='img/hb.jpg') }}" alt="红包"> 
          <span style="color: black;">红包</span>
        </button>
      </div>
    </div>

    <!-- 支付方式 -->
    <div class="pay-methods">
      <div class="method-item" onclick="selectMethod('balance')">
        <input type="radio" id="balance" name="method" checked>
        <label for="balance">账户余额</label>
        <small>可用余额：<span id="balance-show">12345.67</span> 元</small>
      </div>
      <div class="method-item" onclick="selectMethod('credit')">
        <input type="radio" id="credit" name="method">
        <label for="credit">信用支付</label>
        <small>可用额度：5000.00 元</small>
      </div>
    </div>
    
    <!-- 收款表单 (默认隐藏) -->
    <div id="receive-section" class="section" style="display: none;">
      <h3>设置收款金额</h3>
      <div class="form-group">
        <label>收款金额：</label>
        <div style="display: flex; align-items: center; gap: 10px;">
          <input type="number" id="receive-amount" step="0.01" min="0.01" placeholder="0.00">
          <span>元</span>
        </div>
      </div>
      
      <div class="form-group">
        <label>收款备注：</label>
        <input type="text" id="receive-remark" placeholder="请输入收款备注">
      </div>
      
      <button onclick="generateReceiveQR()" style="width: 100%;">生成收款码</button>
    </div>
  </div>

  <!-- 底部导航 -->
  <nav class="bottom-nav">
    <a href="/" class="nav-item active">
      <img src="{{ url_for('static', filename='img/sy.png') }}" alt="首页">
      <span>首页</span>
    </a>
    <a href="/pay" class="nav-item">
      <img src="{{ url_for('static', filename='img/sfk.png') }}" alt="收付款">
      <span>收付款</span>
    </a>
    <a href="/discover" class="nav-item">
      <img src="{{ url_for('static', filename='img/fx.png') }}" alt="发现">
      <span>发现</span>
    </a>
    <a href="/profile" class="nav-item">
      <img src="{{ url_for('static', filename='img/wd.png') }}" alt="我的">
      <span>我的</span>
    </a>
    <a href="/more" class="nav-item">
      <img src="{{ url_for('static', filename='img/gd.png') }}" alt="更多">
      <span>更多</span>
    </a>
  </nav>

  <script>
    // // 模拟用户余额
    // let userBalance = 12345.67;
    // let currentMode = 'default'; // 'default', 'receive', 'touch'
    // let touchPayActive = false;
    // let touchPayTimer = null;

    // // 更新余额显示
    // function updateBalance() {
    //   document.getElementById('balance-show').textContent = userBalance.toFixed(2);
    // }

    // // 更新状态指示器
    // function updateStatusIndicator() {
    //   const indicator = document.getElementById('statusIndicator');
    //   switch(currentMode) {
    //     case 'receive':
    //       indicator.textContent = '收钱状态';
    //       indicator.style.backgroundColor = '#4CAF50';
    //       break;
    //     case 'touch':
    //       indicator.textContent = '碰一碰状态';
    //       indicator.style.backgroundColor = '#FF9800';
    //       break;
    //     default:
    //       indicator.textContent = '默认状态';
    //       indicator.style.backgroundColor = '#1677ff';
    //   }
    // }

    // // 打开收钱功能
    // function openReceive() {
    //   currentMode = 'receive';
    //   updateStatusIndicator();
      
    //   document.getElementById('receive-section').style.display = 'block';
    //   document.getElementById('qr-title').textContent = '个人收钱';
    //   document.getElementById('qr-image').src = 'assets/shouqian.png'; // 收款二维码图片
    //   document.getElementById('qr-description').textContent = '扫一扫向我付款';
    //   document.getElementById('qr-description').style.color = '#4CAF50';
      
    //   // 隐藏默认支付方式
    //   document.querySelector('.pay-methods').style.display = 'none';
    // }

    // // 生成收款二维码
    // function generateReceiveQR() {
    //   const amount = document.getElementById('receive-amount').value;
    //   const remark = document.getElementById('receive-remark').value || '收款';
      
    //   if (!amount || parseFloat(amount) <= 0) {
    //     alert('请输入有效的收款金额');
    //     return;
    //   }
      
    //   // 显示加载状态
    //   document.getElementById('qr-loading').style.display = 'block';
      
    //   // 模拟生成二维码的延迟
    //   setTimeout(() => {
    //     document.getElementById('qr-loading').style.display = 'none';
    //     document.getElementById('qr-image').src = 'assets/shouqian.png';
    //     alert(`已生成 ${amount} 元收款码\n备注: ${remark}`);
    //   }, 1000);
    // }

    // // 打开碰一下功能
    // function openTouchPay() {
    //   if (!touchPayActive) {
    //     currentMode = 'touch';
    //     updateStatusIndicator();
        
    //     touchPayActive = true;
    //     document.getElementById('qr-title').textContent = '碰一碰支付';
    //     document.getElementById('qr-image').src = 'assets/pengyipeng.png'; // 碰一碰图片
    //     document.getElementById('qr-description').textContent = '正在搜索附近设备...';
    //     document.getElementById('qr-description').style.color = '#FF9800';
        
    //     // 显示加载状态
    //     document.getElementById('qr-loading').style.display = 'block';
        
    //     // 隐藏默认支付方式
    //     document.querySelector('.pay-methods').style.display = 'none';
        
    //     // 模拟NFC支付过程
    //     touchPayTimer = setTimeout(() => {
    //       document.getElementById('qr-loading').style.display = 'none';
    //       document.getElementById('qr-description').textContent = '设备已连接，等待支付确认';
    //       simulateTouchPay();
    //     }, 2000);
    //   } else {
    //     // 如果已经是激活状态，则停止支付
    //     stopTouchPay();
    //     resetQRDisplay();
    //   }
    // }
    
    // // 模拟碰一碰支付
    // function simulateTouchPay() {
    //   const amount = (Math.random() * 100 + 1).toFixed(2); // 随机金额
    //   const confirmPay = confirm(`向商家支付 ¥${amount} 元？`);
      
    //   if (confirmPay) {
    //     // 扣除余额
    //     userBalance -= parseFloat(amount);
    //     updateBalance();
    //     document.getElementById('qr-description').textContent = '支付处理中...';
        
    //     setTimeout(() => {
    //       alert(`支付成功！已支付 ¥${amount} 元`);
    //       resetQRDisplay();
    //     }, 1500);
    //   } else {
    //     resetQRDisplay();
    //   }
    // }
    
    // // 停止碰一碰支付
    // function stopTouchPay() {
    //   if (touchPayTimer) {
    //     clearTimeout(touchPayTimer);
    //     touchPayTimer = null;
    //   }
    //   touchPayActive = false;
    //   document.getElementById('qr-loading').style.display = 'none';
    // }
    
    // // 重置二维码显示
    // function resetQRDisplay() {
    //   currentMode = 'default';
    //   updateStatusIndicator();
      
    //   stopTouchPay();
    //   touchPayActive = false;
      
    //   document.getElementById('receive-section').style.display = 'none';
    //   document.querySelector('.pay-methods').style.display = 'block';
    //   document.getElementById('qr-title').textContent = '向商家付款';
    //   document.getElementById('qr-image').src = 'assets/hh.gif';
    //   document.getElementById('qr-description').textContent = '每十分钟自动刷新';
    //   document.getElementById('qr-description').style.color = '';
    //   document.getElementById('qr-loading').style.display = 'none';
    // }

    // // 打开转账功能
    // function openTransfer() {
    //   window.location.href = 'transfer.html';
    // }
    
    // // 打开红包功能
    // function openRedpack() {
    //   window.location.href = 'redpack.html';
    // }

    // // 切换支付方式
    // function selectMethod(method) {
    //   const methods = document.querySelectorAll('input[name="method"]');
    //   methods.forEach(item => {
    //     if (item.id === method) {
    //       item.checked = true;
    //     } else {
    //       item.checked = false;
    //     }
    //   });
    // }
    
    // // 处理返回按钮点击
    // function handleBackButton() {
    //   if (currentMode !== 'default') {
    //     // 如果在收钱或碰一下状态，则重置到默认状态
    //     resetQRDisplay();
    //   } else {
    //     // 如果是默认状态，则返回上一页
    //     window.history.back();
    //   }
    // }

    // // 页面加载时更新余额显示
    // window.onload = function () {
    //   updateBalance();
    //   updateStatusIndicator();
      
    //   // 绑定返回按钮事件
    //   document.getElementById('backBtn').addEventListener('click', handleBackButton);
      
    //   // 模拟二维码自动刷新
    //   setInterval(() => {
    //     if (currentMode === 'default') {
    //       console.log('二维码已自动刷新');
    //     }
    //   }, 600000); // 每10分钟刷新一次
    // };
  </script>
</body>
</html>